<template>
	<view>
		<view class="top_days">
			<view class="monthBtn" ref="pick">
				<picker mode="date" fields="month" :value="deptDay" @change="bindDateChange">
					<image src="/static/image/calendar2.png" mode="aspectFit"></image>
				</picker>
			</view>
			<scroll-view scroll-x="true" :scroll-into-view="'item'+ scrollIntoView" class="day_line">
				<view v-for="(item,index) in cuttentmonthDay" :key="index" :id="'item'+index" class="day_week" :style="[
						isToday(item) && todayObj,
						noYMD(item) && todayObj,
						isClick(item) && selectedObj
					]" @click="getData(item)">
					<view class="txtStyle">
						<text>{{item.weeks}}</text><br />
						<hr class="hr-solid" />
						<text>{{item.month}}/{{item.day}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="duty_info">
			<!-- 排班信息 -->
			<view v-for="(item,index) in depList" :key="index">
				<view class="personal_info">
					<view class="info-text">
						<text class="infoname">{{item.staffIdText}}</text>
						<view class="text_infos">
							<text class="position">{{item.workes}}</text>
							<text class="time">{{item.shiftStartTime}}&nbsp;-&nbsp;{{item.shiftEndTime}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="whole" v-if="depList.length <= 0">
			<image src="/static/image/zanwushuju@2x.png" mode="aspectFit"></image>
			<text>当前月暂无排班任务</text>
		</view>
	</view>
</template>

<script>
	const getToday = (date) => {
		let year = date.getFullYear();
		let month = date.getMonth();
		let day = date.getDate();
		return {
			year,
			month,
			day
		}
	}
	const getDate = (year, month, day) => {
		return new Date(year, month, day)
	}
	export default {
		data() {
			return {
				cuttentmonthDay: [],
				depList: [],
				deptTime: [],
				deptId: null,
				userName: null,
				deptDay: null,
				time: null,
				days: 0,
				year: 0,
				month: 0,
				click_time: {},
				varNum: true,
				scrollIntoView:null,
				todayObj: {
					background: '#ffc060'
				},
				selectedObj: {
					background: '#ffc060'
				},
			}
		},
		created() {
			this.getMonthSum();
			this.getDeptId();
			this.getSearchDept();
		},
		methods: {
			//当前月部门的排班列表
			async getSearchDept() {
				const res = await this
					.$myRequest({ //await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
						url: '/api-personnel/schedules/stats?startTime=' + this.deptDay + "&deptId=" + this
							.deptId + "&type=01",
						method: "get",
					})
				if (res.success == true) {
					this.depList = res.data;
					if (this.depList.length != 0) {
						for (let i in this.depList) {
							var getDepDates = this.depList[i].startTime;
							var timearr = getDepDates.replace(" ", ":").replace(/\:/g, "-").split("-");
							this.depList[i].workes = this.depList[i].workName.match("(.+(?=【))")["0"];
							this.depList[i].startTime = timearr[0] + "-" + timearr[1] + "-" + timearr[2];
							this.depList[i].idArray = this.depList[i].staffIdText.split(',');
						}
					}
				}
			},
			//获取部门id
			getDeptId() {
				this.deptId = uni.getStorageSync('deptid');
			},
			//获取当前用户名字
			getUserName() {
				this.userName = uni.getStorageSync('loginName');
			},
			//获取总的时间和星期
			getMonthDays() {
				this.cuttentmonthDay = [];
				let d = new Date(this.year, this.month, 0);
				this.days = d.getDate();
				for (let i = 1; i <= this.days; i++) {
					let nows = this.year + "-" + this.month + "-" + i;
					let dayweeks = this.dayWeeks(nows);
					this.cuttentmonthDay.push({
						year: this.year,
						month: this.month,
						day: i,
						weeks: dayweeks
					})
				}
				setTimeout(() => {
					this.posiTodayDate();
				}, 100)
			},
			//获取当月的总天数
			getMonthSum() {
				let date = new Date();
				this.year = date.getFullYear();
				this.month = date.getMonth() + 1;
				let day = date.getDate();
				let month = (date.getMonth() + 1) > 9 ? (date.getMonth() + 1) : "0" + (date.getMonth() + 1);
				day = day > 9 ? day : "0" + day;
				this.deptDay = date.getFullYear() + "-" + month + "-" + day;
				this.getMonthDays();
			},
			//一个月的对应星期
			dayWeeks(date) {
				date = new Date(date);
				let weeks = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
				return weeks[date.getDay()]
			},
			//是否为今天
			isToday(date) {
				let dates = date.year + "-" + date.month + "-" + date.day;
				let today = new Date(dates);
				let {
					year,
					month,
					day
				} = getToday(new Date());
				let {
					year: y,
					month: m,
					day: d
				} = getToday(today);
				return year === y && month === m && day === d;
			},
			//是否点击
			isClick(date) {
				if (!this.click_time.day) return false;
				let {
					year,
					month,
					day
				} = getToday(getDate(this.click_time.year, this.click_time.month, this.click_time.day))
				let {
					year: y,
					month: m,
					day: d
				} = getToday(getDate(date.year, date.month, date.day));
				return year === y && month === m && day === d;
			},
			//不是本月本天
			noYMD(date) {
				let dates = date.year + "-" + date.month + "-" + date.day;
				let today = new Date(dates);
				let {
					year,
					month,
					day
				} = getToday(new Date());
				let {
					year: y,
					month: m,
					day: d
				} = getToday(today);
				if (this.varNum == false) {
					return false;
				} else {
					return (year === y && month != m && d === 1) || (year != y && d === 1);
				}
			},
			//获取数据
			getData(data) {
				this.click_time = {
					year: data.year,
					month: data.month,
					day: data.day,
				}
				let month = data.month > 9 ? data.month : "0" + data.month;
				let day = data.day > 9 ? data.day : "0" + data.day;
				this.deptDay = data.year + "-" + month + "-" + day;
				// console.log(this.deptDay)
				this.getSearchDept();
				this.varNum = false;
			},
			//选择时间
			bindDateChange: function(e) {
				let arr = e.detail.value.split("-");
				this.year = arr[0];
				if (arr[1] < 10) {
					this.month = arr[1].slice(1, 2);
				} else {
					this.month = arr[1];
				}
				this.getMonthDays();
				let date = new Date();
				let y = date.getFullYear();
				let m = date.getMonth() + 1;
				let d = date.getDate() > 9 ? date.getDate() : "0" + date.getDate();
				if (y == this.year && m == this.month) {
					m = m > 9 ? m : "0" + m;
					this.deptDay = this.year + "-" + m + "-" + d;
				} else {
					let newm = this.month > 9 ? this.month : "0" + this.month;
					this.deptDay = this.year + "-" + newm + "-01";
				}
				this.getSearchDept();
				this.posiTodayDate();
				this.varNum = true;
				this.click_time = {};
			},
			//定位当天
			posiTodayDate() {
				let date = new Date();
				let y = date.getFullYear();
				let m = date.getMonth() + 1;
				let d = date.getDate();
				let index = 0;
				for (let i = 0; i < this.cuttentmonthDay.length; i++) {
					if (y == this.cuttentmonthDay[i].year && m == this.cuttentmonthDay[i].month && d == this
						.cuttentmonthDay[i].day) {
						index = i;
					}
				}
				this.scrollIntoView = index;
			},
			//-------------------------------------------
			//跳转到信息发送界面
			onNavigationBarButtonTap() {
				uni.navigateTo({
					url: '/pages/duty/dutyPer'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.top_days {
		width: 100%;
		height: 150rpx;
		background-color: #109EF8;
		display: flex;

		.monthBtn {
			width: 15%;
			height: 100%;
			margin-right: 2%;
			position: relative;

			picker {
				width: 90%;
				height: 120rpx;
				text-align: center;
				display: inline-block;
				border-radius: 10px;
				background-color: #58BBFA;
				color: #FFFFFF;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				margin-left: 10%;

				image {
					width: 60rpx;
					height: 60rpx;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
			}
		}

		.day_line {
			width: 83%;
			height: 100%;
			scroll-snap-type: x mandatory;
			overflow: hidden;
			-webkit-backface-visibility: hidden;
			-webkit-perspective: 1000;
			-webkit-overflow-scrolling: touch;
			scrollbar-width: none;
			overflow-x: scroll;
			white-space: nowrap;
			text-align: center;


			.day_week {
				width: 3.5rem;
				height: 120rpx;
				display: inline-block;
				margin-right: 3%;
				border-radius: 20rpx;
				position: relative;
				top: 50%;
				transform: translateY(-50%);
				background-color: #58BBFA;

				.txtStyle {
					position: relative;
					left: 50%;
					top: 25%;
					transform: translate(-50%, -25%);

					.hr-solid {
						width: 84%;
						margin: 8% auto;
						border: none;
						border-top: 0.1px solid #f0f0f0;
					}

					text {
						color: #FFFFFF;
					}
				}
			}
		}
	}

	.day_line::-webkit-scrollbar {
		display: none;
		width: 0;
	}

	::-webkit-scrollbar {

		display: none;
		width: 0;
	}


	// 排班安排
	.personal_info {
		margin: 24rpx auto;
		background-color: #fff;
		width: 80%;
		height: 140rpx;
		border-radius: 10px;

		.info-text {
			margin-left: 10%;

			.infoname {
				display: inline-block;
				margin-top: 5%;
				color: #007AFF;
			}

			.text_infos {
				margin-top: 2%;
				display: flex;

				.time {
					margin-left: 5%;
				}
			}
		}
	}

	.whole {
		text-align: center;
		font-size: 48rpx;
		color: #a6a6a6;
		display: flex;
		flex-direction: column;
		align-items: center;

		image {
			margin: 250rpx 0 50rpx 0;
			width: 100%;
		}
	}
</style>
